<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>yukari world</title>
<#include "/lib/base_source.ftl">
<style type="text/css">
</style>
</head>
<body>
<div class='whole-container'>
<#include "/lib/header.ftl">
    <div>
        <ul class="breadcrumb">
        	<li>歌曲管理</li><span class="divider">/</span>
            <li>添加直播歌单</li>
        </ul>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="container span12">
            <#include "/lib/alert.ftl">

                <div class='main-content'>
                    <div class="well form-inline">
                        <div class='main-action'>
                        	<form id="searchForm" action="" method="post">
                        		<div class="control-group">
                                <label class="control-label">搜索</label>
                                <div class="controls">
                        			<input type="text" id="query" name="query" style="width:150px"/>
	                        		<input type="hidden" name="size" value="5" />
                                </div>
                            	</div>
                        	</form>
                        </div>
                    </div>
                    
                    <div class="table-content">
                    <#-- table -->
                        <table class="table table-striped table-bordered table-condensed" id="itemTable" style="font-size:12px;word-break:break-all;word-wrap:break-word;">
                            <thead>
                            <tr >
                                <th style="width:20%;">歌名</th>
                                <th style="width:20%;">中文名</th>
                                <th style="width:10%;">歌曲分类</th>
                                <th style="width:30%;">备注</th>
                                <th style="width:20%;"></th>
                            </tr>
                            </thead>
                            <tbody id="musicList">
                            </tbody>
                        </table>
                    </div>
                    <div>
                	<form id="addForm" action="${rc.contextPath}/admin/music/sheet/add" method="post">
                    <div class="well form-inline">
                        <div class='main-action'>
                        		<div class="control-group">
                                <label class="control-label">歌单日期</label>
                                <div class="controls">
                                	<input type="text" class="time" name="date"/>
                                	<input type="submit" class="btn btn-primary btn-sm" value="生成"/>
                                </div>
                            	</div>
                        </div>
                    </div>
                    <div class="table-content">
                    <#-- table -->
                        <table class="table table-striped table-bordered table-condensed" id="sheetTable" style="font-size:12px;word-break:break-all;word-wrap:break-word;display:none;">
                            <thead>
                            <tr >
                                <th style="width:20%;">编号</th>
                                <th style="width:50%;">歌名</th>
                                <th style="width:30%;"></th>
                            </tr>
                            </thead>
                            <tbody id="sheetList">
                            </tbody>
                        </table>
                    </div>
                	</form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
    	$('.time').datetimepicker({
	    	format: 'yyyy-mm-dd',
	    	autoclose:true,
	    	minView:2,
	    	todayBtn:true
	    });
    });
    
    
    var key = $("#query").val();
	function search() {
		var query = $("#query").val();
		if (query == ""){
			key = query;
			$("#musicList").html("");
		} else if (query != key){
			key = query;
			searchAjax();
		}
	} 
	
	function searchAjax(){
		$.ajax({
			url : "${rc.contextPath}/admin/music/sheetAddSearch",
	    	dataType : "json",
	    	data :  $("#searchForm").serialize(),
	    	type:'post',
	    	success:function(json){
	    		var data = json.data;
				$("#musicList").html("");
	    		for (var i=0;i<data.length;i++){
	    			showMusic(data[i]);
	    		}
	    	}
		});
	}
	
	function showMusic(data){
		var tr = $('<tr></tr>')
		var td1 = $('<td id="name_'+data.id+'">'+data.name+'</td>');
		var td2 = $('<td>'+data.nameCn+'</td>');
		var td3 = $('<td>'+data.type+'</td>');
		var td5 = $('<td>'+data.description+'</td>');
		var td6 = $('<td><a class="btn btn-success btn-sm" href="javascript:addSheetMusic(\''+data.id+'\')">添加到临时列表</a></td>');
		tr.append(td1).append(td2).append(td3).append(td5).append(td6);
		$("#musicList").append(tr);
	}
	
	function addSheetMusic(id){
		$("#sheetTable").show();
		var index = $("#sheetList tr").size()+1;
		var tr = $('<tr id="sheet_music_'+index+'"></tr>')
		var td1 = $('<td>'+index+'</td>');
		var td2 = $('<td>'+$("#name_"+id).html()+'</td>');
		var td3 = $('<td><a class="btn btn-primary btn-sm" href="javascript:deleteSheetMusic(\''+index+'\')">删除</a></td>');
		td2.append($('<input type="hidden" name="ranks" value="'+index+'">'))
		td2.append($('<input type="hidden" name="ids" value="'+id+'">'))
		tr.append(td1).append(td2).append(td3);
		$("#sheetList").prepend(tr);
	}
	
	function deleteSheetMusic(index){
		var m = $("#sheet_music_"+index);
		var rm = m.prevAll();
		for (var i=0;i<rm.size();i++){
			var tr = rm.eq(i);
			var td = tr.children("td").first();
			var a = tr.children("td").last().find("a");
			var input = td.next().find("input").first();
			var newId = td.html()-1
			td.html(newId);
			input.attr("value",newId);
			tr.attr("id","sheet_music_"+newId);
			a.attr("href","javascript:deleteSheetMusic('"+newId+"')");
		}
		m.remove();
		if ($("#sheetList tr").size() == 0){
			$("#sheetTable").hide();
		}
	}
	
	
	
	function formatDate(now)   {     
		if (now == null){
			return "";
		} 
		var now= new Date(now);     
		var year=now.getFullYear();     
		var month=now.getMonth()+1;     
		var date=now.getDate();     
		return  year+"-"+buling(month)+"-"+buling(date); 
	}
	function buling(a){
		if (a < 10){
			return "0"+a;
		} else {
			return a;
		}
	}

    setInterval("search()",500);
</script>
</body>
</html>